<template>
	<view class="itinerary-edit-container">

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 行程名称 -->
			<view class="form-item">
				<text class="label">行程名称</text>
				<input class="input" v-model="itinerary.itineraryName" placeholder="请输入行程名称（如“北京5日游-经典路线”）" />
			</view>

			<!-- 目的地 -->
			<view class="form-item">
				<text class="label">目的地</text>
				<input class="input" v-model="itinerary.destination" placeholder="请输入行程目的地（如“北京”、“三亚”等）" />
			</view>

			<!-- 行程天数 -->
			<view class="form-item">
				<text class="label">行程天数</text>
				<input class="input" v-model.number="itinerary.days" type="number" placeholder="请输入行程天数（如3/5/7）" />
			</view>

			<!-- 行程路线 -->
			<view class="form-item">
				<text class="label">行程路线</text>
				<textarea class="textarea" v-model="itinerary.route" placeholder="请输入行程路线描述" />
			</view>

			<!-- 包含服务 -->
			<view class="form-item">
				<text class="label">包含服务</text>
				<textarea class="textarea" v-model="itinerary.includeService" placeholder="如“含早餐/含门票”，用逗号分隔" />
			</view>

			<!-- 状态 -->
			<view class="form-item">
				<text class="label">状态</text>
				<view class="status-selector">
					<view class="status-option" :class="{ active: itinerary.status === 0 }"
						@click="itinerary.status = 0">
						<view class="status-radio"></view>
						<text>正常</text>
					</view>
					<view class="status-option" :class="{ active: itinerary.status === 1 }"
						@click="itinerary.status = 1">
						<view class="status-radio"></view>
						<text>停用</text>
					</view>
				</view>
			</view>

			<!-- 为底部按钮留出空间 -->
		<view style="height: 200rpx;"></view>
		</view>

		<!-- 底部固定保存按钮 -->
		<view class="save-bottom-btn">
			<button class="save-button" @click="handleSave">{{ isEditMode ? '更新' : '保存' }}</button>
		</view>
	</view>
</template>

<script>
	import {
		createItinerary,
		updateItinerary,
		getItineraryById
	} from '../../https/itinerary.js'
	export default {
		data() {
			return {
				// 获取页面参数
				itineraryId: 0,
				// 行程信息
				itinerary: {
					itineraryId: 0,
					openId: '',
					itineraryName: '',
					days: 0,
					destination: '',
					route: '',
					includeService: '',
					status: 0
				}
			}
		},

		computed: {
			// 判断是否为编辑模式
			isEditMode() {
				return this.itineraryId !== 0 && !isNaN(this.itineraryId) && this.itineraryId > 0
			}
		},

		onLoad(options) {
			// 安全地获取id参数，并转换为数字类型
			this.itineraryId = options?.id && options.id !== '' ? parseInt(options.id) : 0
			// 初始化行程数据
			this.initItineraryData()
		},

		methods: {
			// 初始化行程数据
			initItineraryData() {
				// 重置行程数据
				this.itinerary = {
					itineraryId: 0,
					openId: uni.getStorageSync('openId') || '',
					itineraryName: '',
					days: 0,
					destination: '',
					route: '',
					includeService: '',
					status: 0
				}

				// 如果是编辑模式，加载行程数据
				if (this.isEditMode) {
					this.loadItineraryData()
				}
			},

			// 加载行程数据（编辑模式时）
			loadItineraryData: async function() {
				try {
					uni.showLoading({
						title: '加载中...'
					})
					// 调用API获取行程详情
					const itineraryData = await getItineraryById(this.itineraryId)
					// 检查返回数据结构
					const hasData = itineraryData && (itineraryData.itineraryId !== undefined || itineraryData.id !== undefined)
					if (hasData) {
						// 适配不同的数据结构
						this.itinerary = {
							itineraryId: itineraryData.itineraryId || itineraryData.id,
							openId: itineraryData.openId || '',
							itineraryName: itineraryData.itineraryName || '',
							days: itineraryData.days || 0,
							destination: itineraryData.destination || '',
							route: itineraryData.route || '',
							includeService: itineraryData.includeService || '',
							status: itineraryData.status || 0
						}
					} else {
						uni.showToast({
							title: '未找到行程信息',
							icon: 'none'
						})
						this.goBack()
					}
				} catch (error) {
					console.error('加载行程数据失败', error)
					uni.showToast({
						title: '加载失败: ' + (error.message || ''),
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 返回上一页
			goBack: function() {
				uni.navigateBack()
			},

			// 保存行程信息的处理函数
			handleSave: function() {
				console.log('保存按钮点击事件触发');
				this.saveItinerary();
			},
			
			// 保存行程信息
			saveItinerary: async function() {
				// 表单验证
				if (!this.itinerary.itineraryName) {
					uni.showToast({
						title: '请输入行程名称',
						icon: 'none'
					})
					return
				}

				if (!this.itinerary.days || this.itinerary.days <= 0) {
					uni.showToast({
						title: '请输入有效的行程天数',
						icon: 'none'
					})
					return
				}

				// 构建请求参数，确保API参数格式正确
				const requestData = {
					// 移除可能导致冲突的字段，使用API函数内部设置的OpenId
					itineraryId: this.isEditMode ? this.itinerary.itineraryId : 0,
					itineraryName: this.itinerary.itineraryName,
					days: Number(this.itinerary.days),
					destination: this.itinerary.destination || '',
					route: this.itinerary.route || '',
					includeService: this.itinerary.includeService || null,
					status: this.itinerary.status
				}

				try {
					// 显示加载提示
					uni.showLoading({
						title: this.isEditMode ? '更新中...' : '保存中...'
					})

					// 调用API
					if (this.isEditMode) {
						// 编辑现有行程
						await updateItinerary(requestData)
					} else {
						// 添加新行程
						await createItinerary({
							...requestData,
							openId: uni.getStorageSync('openId') || '' // 创建行程时仍需openId
						})
					}

					uni.showToast({
						title: this.isEditMode ? '更新成功' : '添加成功',
						icon: 'success',
						complete: () => {
							// 延迟返回，让用户看到成功提示
							setTimeout(() => {
								this.goBack()
							}, 1500)
						}
					})
				} catch (error) {
					console.error('保存行程失败:', error)
					// 显示详细错误信息
					uni.showToast({
						title: error.message || (this.isEditMode ? '更新失败' : '添加失败'),
						icon: 'none',
						duration: 2000 // 增加显示时间
					})
				} finally {
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style scoped>
	.itinerary-edit-container {
		padding: 0;
		background-color: #f5f5f5;
		min-height: 100vh;
		/* 移除可能导致滚动问题的定位 */
	}
	
	/* 确保页面内容可滚动 */
	.form-container {
		padding-bottom: 200rpx; /* 为底部固定按钮留出足够空间 */
		overflow-y: auto; /* 允许内容滚动 */
	}
	
	/* 修复uni-app默认按钮样式 */
	.save-button::after {
		border: none;
	}
	
	.save-button:active {
		opacity: 0.8; /* 添加点击效果 */
	}

	/* 表单区域 */
	.form-container {
		padding: 30rpx;
		padding-top: 120rpx;
		/* 为顶部导航栏留出空间 */
	}

	/* 保存按钮 - 放在页面底部固定位置 */
	.save-bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 9999;
		/* 确保按钮区域不受其他元素遮挡 */
		pointer-events: auto;
	}

	.save-button {
		background-color: #007aff;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
		width: 100%;
		border: none;
		line-height: 1.5;
		display: block;
		position: relative;
		/* 确保按钮本身可点击 */
		pointer-events: auto;
		/* 修复uni-app默认样式 */
	}
	
	.save-button::after {
		border: none;
	}

	.form-item {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 10rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.label {
		display: block;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.input,
	.textarea {
		width: 100%;
		font-size: 32rpx;
		color: #333;
		padding: 0;
		border: none;
		background: none;
	}

	.textarea {
		min-height: 120rpx;
		max-height: 300rpx;
		resize: none;
		font-size: 30rpx;
		line-height: 1.5;
	}

	/* 状态选择器样式 */
	.status-selector {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.status-option {
		display: flex;
		align-items: center;
		margin-right: 60rpx;
		margin-bottom: 20rpx;
	}

	.status-radio {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
		margin-right: 10rpx;
		position: relative;
	}

	.status-option.active .status-radio {
		border-color: #007aff;
	}

	.status-option.active .status-radio::after {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		background-color: #007aff;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 修复输入框聚焦时的样式 */
	.input:focus,
	.textarea:focus {
		outline: none;
	}
</style>